<template>
	<view class="right-textarea">
		<view class="textarea-left">
			<textarea
				ref="orderTextarea"
				:focus="isFocus"
				class="textarea textarea1"
        :style="{height:isheight}"
				:placeholder="placeholderTxt"
				placeholder-class="placeholder"
				v-model="requirement_copy"
				@blur="
					isFocus = false;
					seHeight = false;
				"
				:maxlength="isnum=='1'?'30':'100000000'"
				@input="descInput"
				@click="seHeight = true"
				:class="seHeight == true ? 'myHeight' : ''"
			/>
			 <view class="word-num" v-if="isnum=='1'" :class="seHeight == true ? 'dingwei' : ''">{{ requirement_copy.length }}/30</view>
		</view>
		 <view class="textarea-tip">
<!--			<view class="image-wrapper" @click="$refs.popupTip.open()">-->
<!--				<image src="@/static/img/edit-icon.png" mode="aspectFit"></image>-->
<!--			</view>-->
			<uni-popup ref="popupTip" type="center">
				<order-popup-common morenWidth="660" title="范例" @closePop="closePop('popupTip')">
					<view class="flex flex-vertical" style="padding: 15px;" slot="popup-con">
						<view>我要陈冠希还我借款200元</view>
						<view>我要彭于晏赔偿我人身损害费300元</view>
						<view>我要阿里巴巴给我货款30万元</view>
						<view>我要与林志玲离婚，要抚养权，分财产</view>
						<view>柳岩告我，要我赔偿精神损失费，没有道理，要求打赢</view>
					</view>
				</order-popup-common>
			</uni-popup>

			<!-- <view class="tip-demo" style="z-index: 9999;" v-if="isFocus">
				<view style="font-weight: bold; font-size: 28rpx; ">范例</view>
				<view>我要陈冠希还我借款200元</view>
				<view>我要彭于晏赔偿我人身损害费300元</view>
				<view>我要阿里巴巴给我货款30万元</view>
				<view>我要与林志玲离婚，要抚养权，分财产</view>
				<view>柳岩告我，要我赔偿精神损失费，没有道理，要求打赢</view>
			</view> -->
		</view>

	</view>
</template>

<script>
export default {
	props: {
		requirement: {
			type: String,
			default: ''
		},
		placeholderTxt: {
			type: String,
			default: '我要律师帮我实现什么结果'
		},
    isnum:{
      type:Number,
      default:1
    },
	},
	data() {
		return {
			isFocus: false,
			txtVal: 0,
			seHeight: false,
      requirement_copy:'',
      isheight:'20'
		};
	},
	destroyed() {},
  watch:{
    requirement(){
      console.log("======this.requirement",this.requirement)
      this.requirement_copy = this.requirement;
    },
    requirement_copy(){
      console.log("=====this.requirement_copy.length",this.requirement_copy.length)
      if(this.requirement_copy.length<50){
        this.isheight = (this.requirement_copy.length/20)*56 +'rpx'
      }else{
        this.isheight = (this.requirement_copy.length/20)*40 +'rpx'
      }
    }
  },
	mounted() {
    this.requirement_copy = this.requirement;
    this.isheight = (this.requirement_copy.length/20)*56 +'rpx'
    console.log("----- this.requirement", this.requirement)
  },
	methods: {
		change() {
			this.isFocus = !this.isFocus;
		},
		descInput() {
     this.txtVal = this.requirement_copy.length;
		}
	}
};
</script>

<style lang="scss">
.word-num {
	position: absolute;
	right: 100;
	bottom: 100;
	color: #AAAAAA;
	line-height: 60rpx;
}
::v-deep .word-num {
  position: absolute;
  right: 0rpx;
  bottom: 6rpx;
  color: #AAAAAA;
  line-height: 36rpx;
}

::v-deep  .textarea1{
  min-height: 100rpx!important;
  line-height: 36rpx!important;
  width: 100%!important;
  padding: 10rpx 20rpx!important;
  box-sizing: border-box;
  border-radius: 5px;
}
</style>
